/*
 * @Author: Kilims Ye
 * @LastEditors: Kilims Ye
 * @Date: 2020-05-29 16:34:14
 * @LastEditTime: 2021-01-22 09:48:41
 * @Description: 
 */
import { css, keyframes } from "styled-components";
import { zoomIn, slideInUp, fadeInUp, rollIn, fadeInRight, pulse, fadeIn, flipInY } from 'react-animations'

const zoomInAnimation = keyframes`${zoomIn}`;
const slideInUpAnimation = keyframes`${slideInUp}`
const fadeInUpAnimation = keyframes`${fadeInUp}`
const fadeInAnimation = keyframes`${fadeIn}`
const rollInAnimation = keyframes`${rollIn}`
const fadeInRightAnimation = keyframes`${fadeInRight}`
const pulseAnimation = keyframes`${pulse}`
const flipInYAnimation = keyframes`${flipInY}`

export default {
    themeStyles: {
        blackStyle: {
            fg: 'white',
            bg: '#222'
        },
        warmStyle: {
            fg: 'tomato',
            bg: 'papayawhip'
        }
    },
    headerishstuff: css`
        height: 150px;
        padding: 20px;
    `,
    normalFormFontSizeStyle: css`
        font-size: 0.38rem !important;
    `,
    normalTipsFontSizeStyle: css`
        font-size: 0.35rem !important;
    `,
    lineHeightStyle: css`
        line-height: 1.5rem;
        min-height: 1.3rem;
    `,
    zoomIn: css`
        animation: 0.3s ${zoomInAnimation}
    `,
    slideInUp: css`
        animation: 0.8s ${slideInUpAnimation}
    `,
    fadeInUp: css`
        animation: 0.8s ${fadeInUpAnimation}
    `,
    flipInY: css`
        animation: 1s ${flipInYAnimation}
    `,
    rollIn: css`
        animation: 1s ${rollInAnimation}
    `,
    fadeInRight: css`
        animation: 1s ${fadeInRightAnimation}
    `,
    fadeIn: css`
        animation: 1s ${fadeInAnimation}
    `,
    fadeInUpInfinite: css`
        animation: 1.2s ${fadeInUpAnimation} infinite linear
    `,
    scaleInfinite: css` /**无限缩放 */
        @keyframes scaleDraw {  
            0%{
                transform: scale(1);  
            }
            25%{
                transform: scale(1.1); /*放大1.1倍*/
            }
            50%{
                transform: scale(1);
            }
            75%{
                transform: scale(1.1);
            }
        }
        animation: scaleDraw 5s ease-in-out infinite;
    `,
    pulseInfinite: css`
        animation: 1.2s ${pulseAnimation} infinite linear
    `
}